<template>
  <div class="p-4 box-border">
    <uni-forms
      ref="form"
      :modelValue="formData"
      :rules="rules"
      label-position="top"
    >
      <uni-forms-item
        v-for="field in fields"
        :key="field.name"
        :label="field.label"
        :required="field.required"
        customClass="custom-form-item"
      >
        <uni-easyinput
          v-model="formData[field.name]"
          :placeholder="field.placeholder"
          v-if="field.component === 'input'"
        />
        <uni-easyinput
          type="textarea"
          v-model="formData[field.name]"
          :placeholder="field.placeholder"
          v-else-if="field.component === 'textarea'"
        />
        <uni-date-picker
          type="date"
          v-model="formData[field.name]"
          :placeholder="field.placeholder"
          v-else-if="field.component === 'date'"
        />
        <uni-picker
          v-model="formData[field.name]"
          :placeholder="field.placeholder"
          :options="field.options"
          v-else-if="field.component === 'picker'"
        />
        <uni-upload
          v-model="formData[field.name]"
          :placeholder="field.placeholder"
          v-else-if="field.component === 'upload'"
        />
      </uni-forms-item>
      <button @click="submitForm" type="primary">Submit</button>
    </uni-forms>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单字段
      fields: [
        {
          name: "name",
          label: "姓名",
          placeholder: "请输入姓名",
          component: "input",
          required: true,
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        {
          name: "textarea",
          label: "textarea",
          placeholder: "请输入textarea",
          component: "textarea",
          required: true,
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        {
          name: "date",
          label: "date",
          placeholder: "请输入textarea",
          component: "date",
          start: "2015-09-01",
          end: "2027-09-01",
          required: true,
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        {
          name: "age",
          label: "年龄",
          placeholder: "请输入年龄",
          component: "picker",
          options: [
            {
              value: "usa",
              label: "美国",
            },
            {
              value: "china",
              label: "中国",
            },
            {
              value: "brazil",
              label: "巴西",
            },
            {
              value: "japan",
              label: "日本",
            },
          ],
          rules: [
            {
              required: true,
              errorMessage: "年龄不能为空",
            },
            {
              format: "number",
              errorMessage: "年龄只能输入数字",
            },
          ],
        },
        {
          name: "upload",
          label: "upload",
          placeholder: "请上传",
          component: "upload",
        },
      ],
      formData: {
        age: "china",
      },
    };
  },
  computed: {
    rules() {
      const rules = {};
      this.fields.forEach((field) => {
        rules[field.name] = {
          rules: field.rules,
        };
      });
      console.log("rules", rules);
      return rules;
    },
  },
  watch: {
    rules: {
      deep: true,
      handler(newVal) {
        this.$refs.form?.setRules(newVal);
      },
      immediate: true,
    },
  },
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    submitForm() {
      this.$refs.form
        .validate()
        .then((res) => {
          console.log("success", res);
          uni.showToast({
            title: `校验通过`,
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>
